// 广告模板、申请
<template>
    <div>
        <GoBack></GoBack>
        <!-- 广告上架框架 -->
        <div class="Ad-container">
            <p class="adselfBox">广告上架申请</p>
            <p class="adtips">选择下方模板并编辑图片上文字</p>
            <!-- 广告模板切换Box -->
            <div class="changeBox">
                <div class="mainImgBox">
                    <img :src="mainImgURL" alt="">
                    <div class="tuanduan flex flex-align-center">
                        <input type="text" placeholder="XXX团队" v-model="team">
                    </div>
                    <div class="aboutQQ flex flex-align-center">
                        <input type="text" placeholder="联系QQ：xxxxxxxxx" v-model="qq_text">
                    </div>
                </div>
                <!-- 无缝滚动 -->
                <SeamlessScroll class="scrollBox" :class-option="classOption3">
                  <div class="tabBox flex flex-align-center" slot="left-switch">
                      <img src="@/assets/img/Aashelf/tab-left.png" alt="">
                  </div>
                  <ul class="ul-item">
                      <li class="item flex flex-align-center flex-pack-center" v-for='(item,index) in imgItemList' :key='index' @click="onChangeItemFun(item.image,item.id)">
                          <img :src="item.image" alt="">    
                      </li>
                  </ul>
                  <div class="tabBox flex flex-align-center"  slot="right-switch">
                      <img src="@/assets/img/Aashelf/tab-right.png" alt="">
                  </div>  
                </SeamlessScroll>  
            </div>
            <!-- 提交按钮 -->
            <div class="fromGroup">
                <div class="postBtn flex flex-align-center flex-pack-center" @click="onPostAd">
                    <p>提交申请</p>
                </div>
                <p>{{tips}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import GoBack from '../goback'
import SeamlessScroll from 'vue-seamless-scroll'
export default {
    components: {
        GoBack,
        SeamlessScroll
    },
    data () {
        return {
            mainImgURL: '',
            imgItemList:[],
            imageid:'',
            team:'',
            qq_text:'',
            tips:'',
        }
    },
    methods: {
        onPostAd(){
           let uid = this.$store.state.userInfo.id;
           let team = this.team.slice(0,3);
           let qq = this.qq_text.slice(0,11);
           if(this.team != '' && this.qq_text != ''){
               this.https('user/postApplyAdv',{uid:uid,template_id:this.imageid,team:team,qq:qq},'post')
               .then(data => {
                   this.$message({
                    message: '恭喜你，广告申请提交成功',
                    type: 'success'
                    }); 
               })
           }else{
                this.$message.error('团队名或联系qq不能为空！');
           }
        },
        onChangeItemFun(url,id){
            this.mainImgURL = url;
            this.imageid = id;
        },
        getAdvTemplate(){
            let uid = this.$store.state.userInfo.id;
            this.https('/user/getObtainAdvTemplate',{uid:uid})
            .then(data => {
                this.mainImgURL = data.list[0].image;
                this.imageid = data.list[0].id;
                this.imgItemList = data.list;
                this.tips = data.apply_status;
            })
        },
        DataLength(fData){
          var intLength=0 
        for (var i=0;i<fData.length;i++) 
        { 
            if ((fData.charCodeAt(i) < 0) || (fData.charCodeAt(i) > 255)) 
                intLength=intLength+2 
            else 
                intLength=intLength+1    
        } 
        return intLength 
    }
    },
    computed: {
        classOption3 () {
         return {
            autoPlay: false,
            switchOffset:0
         }
      },  
    },
    mounted () {
       this.getAdvTemplate(); 
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/usercenter/adshelf.less);
</style>


